// import React from 'react'

// const Index: React.FC = () => {
//   return (
//     <div>创建团队</div>
//   )
// }

// export default Index

// src/Comment.tsx
// import React, { useState } from 'react';

// interface Comment {
//   id: number;
//   text: string;
// }

// const CommentComponent: React.FC = () => {
//   const [comments, setComments] = useState<Comment[]>([]);
//   const [commentText, setCommentText] = useState<string>('');

//   const handleAddComment = () => {
//     if (commentText.trim()) {
//       const newComment: Comment = {
//         id: Date.now(), // 使用当前时间戳作为唯一 ID
//         text: commentText.trim(),
//       };
//       setComments([...comments, newComment]);
//       setCommentText(''); // 清空输入框
//     }
//   };

//   return (
//     <div>
//       <h2>评论区</h2>
//       <textarea
//         value={commentText}
//         onChange={(e) => setCommentText(e.target.value)}
//         placeholder="写下你的评论..."
//       />
//       <button onClick={handleAddComment}>添加评论</button>
//       <ul>
//         {comments.map((comment) => (
//           <li key={comment.id}>{comment.text}</li>
//         ))}
//       </ul>
//     </div>
//   );
// };

// export default CommentComponent;


// src/Comment.tsx
import React, { useState } from 'react';

interface Reply {
  id: number;
  text: string;
}

interface Comment {
  id: number;
  text: string;
  replies: Reply[];
}

const CommentComponent: React.FC = () => {
  const [comments, setComments] = useState<Comment[]>([]);
  const [commentText, setCommentText] = useState<string>('');
  const [replyText, setReplyText] = useState<string>('');
  const [replyingTo, setReplyingTo] = useState<number | null>(null);

  const handleAddComment = () => {
    if (commentText.trim()) {
      const newComment: Comment = {
        id: Date.now(),
        text: commentText.trim(),
        replies: [],
      };
      setComments([...comments, newComment]);
      setCommentText('');
    }
  };

  const handleAddReply = (commentId: number) => {
    if (replyText.trim()) {
      const newReply: Reply = {
        id: Date.now(),
        text: replyText.trim(),
      };
      
      setComments((prevComments) =>
        prevComments.map(comment =>
          comment.id === commentId
            ? { ...comment, replies: [...comment.replies, newReply] }
            : comment
        )
      );
      setReplyText('');
      setReplyingTo(null); // Clear replying state
    }
  };

  return (
    <div style={{padding:'100px'}}>
      
    </div>
  );
};

export default CommentComponent;